<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>学生统计</title>
    <link href="/cms/frame/bootstrap-4.6.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/cms/frame/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
    <link href="/cms/frame/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #statContainer {
            width: 100%;
            height: 100%;
        }

        #statContainer {
            display: flex;
            flex-direction: column;
        }

        #statNav {
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: 华文宋体;
            border-bottom: 1px solid rgba(0, 255, 178, 0.04);
        }

        #statCenter {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        .chart-container-1 {
            width: 30%;
        }

        .chart-container-2 {
            width: 60%;
        }
    </style>
</head>

<body>
<div id="statContainer">
    <div id="statNav">
        <span>统计分析</span>/<span>学生统计</span>
    </div>
    <div id="statCenter">
        <div class="chart-container-1">
            <canvas id="genderChart"></canvas>
            <h5 class="text-center">男女比例</h5>
        </div>
        <div class="chart-container-2">
            <canvas id="classChart"></canvas>
            <h5 class="text-center">各班级人数</h5>
        </div>
    </div>
</div>

<script src="/cms/frame/js/jquery-3.7.1.min.js"></script>
<script src="/cms/frame/bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(document).ready(function () {
        loadStatistics();
    });

    function loadStatistics() {
        $.post("/cms/StuController/gender-ratio", function (data) {
            const genderLabels = ['男', '女'];
            const genderCounts = [data.data['男'], data.data['女']];
            drawGenderChart(genderLabels, genderCounts);
        });

        $.post("/cms/StuController/class-student-count", function (data) {
            const classNames = data.data.map(item => item.clname);
            const classCounts = data.data.map(item => item.studentCount);
            drawClassChart(classNames, classCounts);
        });
    }

    function drawGenderChart(labels, data) {
        const ctx = document.getElementById('genderChart').getContext('2d');
        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    label: '性别比例',
                    data: data,
                    backgroundColor: ['#36A2EB', '#FF6384'],
                    hoverOffset: 4,
                }]
            },
            options: {
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function (tooltipItem) {
                                const percentage = ((tooltipItem.raw / data.reduce((a, b) => a + b, 0)) * 100).toFixed(2);
                                return `${tooltipItem.label}: ${tooltipItem.raw} (${percentage}%)`;
                            }
                        }
                    }
                },
                cutout: '50%'
            }
        });
    }

    function drawClassChart(labels, data) {
        const ctx = document.getElementById('classChart').getContext('2d');

        const colors = [
            '#FFA500', '#FF6384', '#FFCE56', '#4BC0C0', '#9966FF',
            '#45B500', '#FF5733', '#C70039', '#900C3F', '#800000',
            '#FFC300', '#DAF7A6', '#FFC0CB', '#FF4500', '#7FFF00',
            '#8A2BE2', '#D2691E', '#CD5C5C', '#FFFACD', '#ADFF2F',
            '#F0E68C', '#4682B4', '#5F9EA0', '#20B2AA', '#778899',
            '#B0C4DE', '#708090', '#FFD700', '#36A2EB', '#DDA0DD'
        ];

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: '人数',
                    data: data,
                    backgroundColor: colors, // 使用颜色数组
                    borderColor: '#fff',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '人数'
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function (tooltipItem) {
                                const total = data.reduce((a, b) => a + b, 0);
                                const percentage = ((tooltipItem.raw / total) * 100).toFixed(2);
                                return `${tooltipItem.label}: ${tooltipItem.raw} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    }
</script>
</body>
</html>
